<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="机主协议" @ok="handleOk" width="1000px">
            <div id="wordView" class="wordView" v-html="wordText" />
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref , nextTick } from 'vue';
import mammoth from "mammoth";

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
});

const emit = defineEmits(['update:modelValue']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});
// 确定按钮的回调
const handleOk = () => {
    emit('update:modelValue', false)
};

const wordText = ref()
function getWordText() {
    const xhr = new XMLHttpRequest();
    xhr.open("get", '/src/assets/doc/GpuMall.docx', true);
    xhr.responseType = "arraybuffer";
    xhr.onload = () => {
        if (xhr.status == 200) {
            mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
                nextTick(()=> {
                    wordText.value = resultObject.value
                })
            });
        }
    };
    xhr.send();
}
getWordText()

</script>

<style scoped lang="less">
    .wordView {
        height: 70vh;
        overflow-y: auto;
    }
</style>

